<template>
  <div class="box">

      <div class="item">
          <el-card style="height: 180px;">
              <div style=" width: 100%; height: 140px; display: grid; align-items: center; justify-content: center;">
                  <el-tooltip content="点击添加新的群组(部门)" effect="light">
                      <el-button link @click="add">
                        <el-icon :size="58"><Plus /></el-icon>
                      </el-button>
                  </el-tooltip>
              </div>
          </el-card>
      </div>

      <VueDraggable ref="el" v-model="plist">
      <div class="item" v-for="(item, index) in plist" :key="item.id">
        <div class="card-header">
                  <span>{{ item.name }}</span>
              </div>
          <!-- <el-card>
              <template #header>
              <div class="card-header">
                  <span>{{ item.name }}</span>
              </div>
              </template>
              <el-row v-if="item.children.length > 0" v-for="(citem, cindex) in item.children">
                <el-col :span="24">{{ citem.name }}</el-col>
              </el-row> 
              
          </el-card> -->
      </div>
      </VueDraggable>

  </div>

</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { list } from '@/api/groups'
import { VueDraggable } from 'vue-draggable-plus'
export default {
  setup () {
      
      const router = useRouter()
      const data = reactive({
        list: [
        {
          name: '语文',
          id: 1,
          checked: false,
        },
        {
          name: '数学',
          id: 2,
          checked: true,
        },
        {
          name: '英语',
          id: 3,
          checked: false,
        },
        {
          name: '化学',
          id: 4,
          checked: false,
        },
        {
          name: '物理',
          id: 6,
          checked: false,
        },
        {
          name: '美术',
          id: 7,
          checked: false,
        },
        ],
        tableData: [
          {
            id: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
          },
          {
            id: '2016-05-02',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
          },
          {
            id: '2016-05-04',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
          },
          {
            id: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
          },
        ]
      })

      const add = () => {
        router.push({name: 'addGroup'})
      }

      onMounted(() => {
        // list().then((res) => {
        //   if(res.code === 200) {
            
        //   }
        // })
        console.log(data.list)
        // data.list = [
        // {
        //   name: '语文',
        //   id: 1,
        //   checked: false,
        // },
        // {
        //   name: '数学',
        //   id: 2,
        //   checked: true,
        // },
        // {
        //   name: '英语',
        //   id: 3,
        //   checked: false,
        // },
        // {
        //   name: '化学',
        //   id: 4,
        //   checked: false,
        // },
        // {
        //   name: '物理',
        //   id: 6,
        //   checked: false,
        // },
        // {
        //   name: '美术',
        //   id: 7,
        //   checked: false,
        // },
        // ]
      })


      const plist = ref([
        {
          name: 'Joao',
          id: 1,
          checked: false,
        },
        {
          name: 'Jean',
          id: 2,
          checked: true,
        },
        {
          name: 'Johanna',
          id: 3,
          checked: false,
        },
        {
          name: 'Juan',
          id: 4,
          checked: false,
        },
      ]);
  

      return {
        add, 
        plist,
        ...toRefs(data)
      }
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin: 10px;
  column-count: 2;
  column-gap: 10px;
  @media screen and (min-width: 400px) {
    column-count: 2;
  }
  
  @media screen and (min-width: 600px) {
    column-count: 3;
  }
  
  @media screen and (min-width: 800px) {
    column-count: 4;
  }
  
  @media screen and (min-width: 1100px) {
    column-count: 5;
  }

  .item {
    margin-bottom: 10px;
    /* table {
      border-spacing: 1px;
      border-color: rgb(255, 255, 255);
      width: 100%;
    } */

    .el-collapse {
      border-top: none;
      .el-collapse-item {
        button {
          background-color: #E6A23C;
          font-weight: 400;
          display: block;
          text-align: center;
          .el-icon {
            display: none;
          }
        }
        .el-collapse-item__header {
          color: #fff;
          font-weight: bold;
        }
        .el-collapse-item__wrap {
            border-bottom: none;
        }
      }

    }

    .el-card {
      min-height: 180px;

      .el-card__header {
        background-color: #409EFF;
        color: #fff;
        text-align: center;
      }

      .el-card__body {
        table {
          border-spacing: 1px;
          border-color: rgb(255, 255, 255);
          width: 100%;
          font-size: 14px;
        }
      }

      .el-card__footer {
        font-size: 14px;
        color: #606266;
      }

    }
    

  }

}
</style>